<template>
  <div>
    <h2>1.基础用法</h2>
    <RadioButton
        v-model="selected"
        value="apple"
        label="苹果"
    />
    <RadioButton
        v-model="selected"
        value="banana"
        label="香蕉"
    />
    <h2>2.禁用状态</h2>
    <RadioButton
        v-model="selected"
        value="disabled"
        label="禁用选项"
        disabled
    />
    <h2>3.自定义颜色和尺寸</h2>
    <RadioButton
        v-model="selected"
        value="custom"
        label="自定义样式"
        color="#ff4757"
        size="large"
    />
    <h2>4.分组使用</h2>
    <h3>选择性别</h3>
    <RadioButton
        v-model="gender"
        value="male"
        label="男"
        name="gender"
    />
    <RadioButton
        v-model="gender"
        value="female"
        label="女"
        name="gender"
    />
    <h2>5.事件处理</h2>
    <RadioButton
        v-model="selected"
        value="event1"
        label="带事件选项1"
        @change="handleChange"
        @click="handleClick"
    />
  </div>


</template>

<script setup>
import { ref } from 'vue';
import RadioButton from '@/components/RadioButton/RadioButton.vue';

const selected = ref('apple');

// 分组使用
const gender = ref('male');

const handleChange = (value) => {
  console.log('选中值变化:', value);
};

const handleClick = (event) => {
  console.log('点击事件:', event);
};
</script>
<style scoped>
h2 {
  position: relative;
  text-align: left;
  margin-top: 20px;
}

h2:before {
  content: "";
  position: absolute;
  top: 0;
  width: 40%;
  height: 1px;
  background-color: #333;
}

h2:before {
  left: 0;
}


</style>